<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
    <link rel="stylesheet" href="work-one.css">
  </head>
  <body>
    <div id="logister">
      <form action="data.html" method="post" enctype="multipart/form-data">
        <div>
          <span class="tip3">欢迎注册会员</span>
        </div>
        <div>
          <label for="telephone" class="lbstyle">手机号码 ：</label>
          <input
            class="footer0"
            type="tel"
            name="telephone"
            id="telephone"
            placeholder="11位手机号"
            pattern="^1[3-9]\d{9}$"
            maxlength="11"
            required
          />
          <span class="tip1">必填</span>
        </div>
        <div>
          <label for="password" class="lbstyle">创建密码 ：</label>
          <input
            class="footer0"
            type="password"
            name="password"
            id="password"
            placeholder="8位密码"
            maxlength="8"
            required
          />
          <span class="tip1">必填</span>
        </div>
        <div>
          <label for="e-mail" class="lbstyle">注册邮箱 ：</label>
          <input
            class="footer0"
            type="email"
            name="e-mail"
            id="e-mail"
            placeholder="例如:wustzz@sina.com"
            required
          />
          <span class="tip1">必填</span>
        </div>
        <div>
          <!-- 验证码区域 -->
          <label for="captchaInput" class="lbstyle"> 验证码 ： </label>
          <input
            class="footer0"
            type="text"
            name="captchaInput"
            id="captchaInput"
            maxlength="4"
            autocomplete="off"
            required
          />
          <span id="codeBox" title="点击刷新">UJFg</span>
          <span id="refreshBtn" title="点击刷新">🔁</span>
        </div>
        <div>
          <span class="lbstyle">性别 ：</span>
          <label>
            <input
              class="footer0"
              type="radio"
              name="sex"
              id="sex"
              value="male"
            /><span class="tip0">男</span>
          </label>
          <label
            ><input
              class="footer1"
              type="radio"
              name="sex"
              id="sex"
              value="female"
            /><span class="tip0">女</span>
          </label>
        </div>
        <div>
          <label for="date" class="lbstyle">生日 ：</label>
          <input class="footer0" type="date" name="date" id="date" />
        </div>
        <div>
          <label for="age" class="lbstyle">年龄 ：</label>
          <input
            class="footer0"
            type="number"
            name="age"
            id="age"
            min="0"
            max="150"
          />
        </div>
        <div id="oriPlace">
          <label for="province" class="lbstyle">籍贯 ：</label>
          <select
            class="footer0"
            name="province"
            id="province"
            value="湖北省"
          ></select>
          <select name="city" id="city" value="武汉"></select>
        </div>
        <div>
          <label for="education" class="lbstyle">个人学历 ：</label>
          <select class="footer0" name="education" id="education">
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中/中专/技校">高中/中专/技校</option>
            <option value="专科">专科</option>
            <option value="本科" selected>本科</option>
            <option value="硕士研究生">硕士研究生</option>
            <option value="博士研究生">博士研究生</option>
          </select>
        </div>
        <div>
          <label class="lbstyle">月薪 ：</label>
          <input
            class="footer0"
            type="range"
            name="wage"
            id="wage"
            min="0"
            max="10000"
            step="50"
            value="5000"
          />
          <span id="msg"></span>
        </div>
        <div>
          <label class="lbstyle">个人爱好 ：</label>
          <label
            ><input
              class="footer0"
              type="checkbox"
              name="hobby"
              id="hobby"
            /><span class="tip0">唱歌</span>
          </label>
          <label
            ><input type="checkbox" name="hobby" id="hobby" /><span class="tip0"
              >跑步</span
            >
          </label>
          <label
            ><input type="checkbox" name="hobby" id="hobby" /><span class="tip0"
              >游泳</span
            >
          </label>
        </div>
        <div>
          <label for="profPicture" class="lbstyle">个人照片 ：</label>
          <input
            class="footer2"
            type="file"
            name="profPicture"
            id="profPicture"
            accept="image/*"
          />
        </div>
        <div id="preview">
          <img id="previewImage" src="" alt="预览" />
          <span id="noImage"></span>
        </div>
        <div>
          <label for="biography" class="lbstyle" id="lbspec">个人简介 ：</label>
          <textarea
            class="footer0"
            name="biography"
            id="biography"
            rows="11"
            cols="30"
          ></textarea>
        </div>
        <div>
          <input type="submit" id="submitBtn" value="提交" />
          <input
            type="reset"
            id="resetBtn"
            onclick="resetForm()"
            value="重填"
          />
        </div>
      </form>
    </div>
    <script>

      function randomCode() {
        const pool =
          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let code = "";
        for (let i = 0; i < 4; i++) {
          code += pool[(Math.random() * pool.length) | 0];
        }
        return code;
      }

      function refreshCaptcha() {
        const code = randomCode();
        document.getElementById("codeBox").textContent = code;
        document.getElementById("captchaInput").dataset.answer = code; 
        document.getElementById("captchaInput").value = "";
        document.getElementById("captchaInput").placeholder = "";
      }
      refreshCaptcha(); 
      document
        .getElementById("codeBox")
        .addEventListener("click", refreshCaptcha);
      document
        .getElementById("refreshBtn")
        .addEventListener("click", refreshCaptcha);

      document
        .getElementById("submitBtn")
        .addEventListener("click", function () {
          const input = document.getElementById("captchaInput");
          const txt = input.value.trim();
          const ans = input.dataset.answer;

          if (txt === "") {
            input.value = ""; 
            input.placeholder = "请输入验证码";
            return;
          }
          if (txt !== ans) {
            input.value = "";
            refreshCaptcha(); 
            input.placeholder = "验证码输入错误";
            return;
          }

        });

      document
        .getElementById("captchaInput")
        .addEventListener("input", function () {
          this.placeholder = ""; 
        });

      document.querySelector("form").addEventListener("reset", () => {

        setTimeout(refreshCaptcha, 0); 
      });

      const db = {
        湖北省: [
          "武汉",
          "黄石",
          "十堰",
          "宜昌",
          "襄阳",
          "鄂州",
          "荆门",
          "孝感",
          "荆州",
          "黄冈",
          "咸宁",
          "随州",
          "天门",
          "仙桃",
          "潜江",
        ],
      };

      const provSel = document.getElementById("province");
      const citySel = document.getElementById("city");

      Object.keys(db).forEach((p) => provSel.add(new Option(p, p)));

      const hubeiIndex = Array.from(provSel.options).findIndex(
        (opt) => opt.value === "湖北省"
      );
      provSel.selectedIndex = hubeiIndex; 

      function updateCity() {
        citySel.length = 0; // 清空
        const cities = db[provSel.value] || []; 
        let wuhanIndex = -1;
        cities.forEach((c, idx) => {
          citySel.add(new Option(c, c));
          if (c === "武汉") wuhanIndex = idx; 
        });
        if (wuhanIndex !== -1) citySel.selectedIndex = wuhanIndex; 
      }
  
      provSel.onchange = updateCity;
      updateCity();

      function initDefault() {
        const hubeiIndex = Array.from(provSel.options).findIndex(
          (opt) => opt.value === "湖北省"
        );
        provSel.selectedIndex = hubeiIndex;

        updateCity();
      }

      initDefault();
      document.querySelector("form").addEventListener("reset", () => {

        setTimeout(initDefault, 0); 
      });
      const msgSpan = document.getElementById("msg");
      const wage = document.getElementById("wage");

      window.onload = () => (msgSpan.textContent = wage.value);

      wage.addEventListener("input", () => (msgSpan.textContent = wage.value));

      wage.form.addEventListener("reset", () => {
        setTimeout(() => (msgSpan.textContent = wage.defaultValue), 0);
      });


      const form = document.querySelector("form");
      const fileInput = document.getElementById("profPicture");
      const previewImage = document.getElementById("previewImage");
      const noImage = document.getElementById("noImage");
      fileInput.addEventListener("change", function () {
        const file = this.files[0];

        if (file) {
          if (file.type.startsWith("image/")) {
            const reader = new FileReader();

            reader.onload = function (e) {
              previewImage.src = e.target.result;
              previewImage.style.display = "block";
              noImage.style.display = "none";
            };

            reader.readAsDataURL(file);
          } else {
            clearPreview();
            this.value = "";
            setTimeout(()=>(alert("请上传图片格式文件")), 1);
          }
        } else {
          clearPreview();
        }
      });

      function clearPreview() {
        previewImage.src = "";
        previewImage.style.display = "none";
        noImage.style.display = "block";
      }
      function resetForm() {
        form.reset();
        clearPreview();
      }
    </script>
  </body>
</html>
